import { ref } from 'vue';

import Button from './fluentui/Button.vue';
import Dialog from './fluentui/Dialog.vue';
import DialogBody from './fluentui/DialogBody.vue';

const isShow = ref(false);
const DialogTitle = ref(<></>);
const DialogContent = ref(<></>);
const ConfirmCallback = ref<(result: boolean) => void>(() => {});

export async function confirm(content: any, title?: any): Promise<boolean> {
  return new Promise((resolve) => {
    DialogTitle.value = title ?? (
      <div class="text-lg font-semibold">确认操作</div>
    );
    DialogContent.value = content;
    ConfirmCallback.value = resolve;
    isShow.value = true;
  });
}
export default function GlobalDialog() {
  const handleConfirm = () => {
    isShow.value = false;
    ConfirmCallback.value(true);
  };

  const handleCancel = () => {
    isShow.value = false;
    ConfirmCallback.value(false);
  };

  return (
    <>
      <Dialog
        modelValue={isShow.value}
        onUpdate:modelValue={(value) => (isShow.value = value)}
        type="modal"
      >
        <DialogBody>
          <div>
            <div class="mb-4 text-lg font-semibold">{DialogTitle.value}</div>
            <div class="mb-4">{DialogContent.value}</div>
            <div class="flex justify-end gap-2">
              <Button appearance="secondary" onClick={handleCancel}>
                取消
              </Button>
              <Button onClick={handleConfirm}>确认</Button>
            </div>
          </div>
        </DialogBody>
      </Dialog>
    </>
  );
}
